<template>
  <div class="event-level-evaluation">
    <!-- 评估卡片容器 -->
    <el-card class="evaluation-card">
      <div class="card-title">事件等级评估</div>

      <!-- 折叠面板（对应各事件等级） -->
      <el-collapse v-model="activePanel" accordion class="level-collapse">
        <!-- Ⅰ类事件 -->
        <el-collapse-item :title="levels[0].name" :name="levels[0].id">
          <el-checkbox
            v-model="levels[0].options[0].isChecked"
            class="level-option"
          >
            {{ levels[0].options[0].label }}
          </el-checkbox>
        </el-collapse-item>

        <!-- Ⅱ类事件 -->
        <el-collapse-item :title="levels[1].name" :name="levels[1].id">
          <el-checkbox
            v-model="levels[1].options[0].isChecked"
            class="level-option"
          >
            {{ levels[1].options[0].label }}
          </el-checkbox>
        </el-collapse-item>

        <!-- Ⅲ类事件 -->
        <el-collapse-item :title="levels[2].name" :name="levels[2].id">
          <el-checkbox
            v-model="levels[2].options[0].isChecked"
            class="level-option"
          >
            {{ levels[2].options[0].label }}
          </el-checkbox>
        </el-collapse-item>

        <!-- Ⅳ类事件（默认展开） -->
        <el-collapse-item :title="levels[3].name" :name="levels[3].id">
          <el-checkbox
            v-model="levels[3].options[0].isChecked"
            class="level-option"
          >
            {{ levels[3].options[0].label }}
          </el-checkbox>
        </el-collapse-item>
      </el-collapse>

      <!-- 保存按钮 -->
      <div class="save-btn-wrap">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "EventLevelEvaluation", // 组件名称
  data() {
    return {
      activePanel: "4", // 默认展开Ⅳ类事件（对应id=4）
      // 事件等级数据（匹配截图内容）
      levels: [
        {
          id: "1",
          name: "Ⅰ类（特别重大环境事件）",
          options: [
            {
              label:
                "因环境污染造成设区的市级以上城市集中式饮用水水源地取水中断的；",
              isChecked: false,
            },
          ],
        },
        {
          id: "2",
          name: "Ⅱ类（重大环境事件）",
          options: [
            {
              label: "因环境污染造成县级城市集中式饮用水水源地取水中断的；",
              isChecked: false,
            },
          ],
        },
        {
          id: "3",
          name: "Ⅲ类（较大环境事件）",
          options: [
            {
              label: "因环境污染造成乡镇集中式饮用水水源地取水中断的；",
              isChecked: false,
            },
          ],
        },
        {
          id: "4",
          name: "Ⅳ类（一般环境事件）",
          options: [
            {
              label:
                "对饮用水水源地造成一定影响，尚未导致饮用水水源地取水中断的。",
              isChecked: true, // 截图中Ⅳ类默认选中
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 保存选中的事件等级信息
    handleSave() {
      // 收集选中的选项（实际项目可替换为接口提交逻辑）
      const selected = this.levels
        .filter((level) => level.options.some((opt) => opt.isChecked))
        .map((level) => ({
          levelName: level.name,
          selectedOption: level.options.find((opt) => opt.isChecked)?.label,
        }));

      this.$message.success("事件等级评估已保存！");
      console.log("选中的评估信息：", selected);
    },
  },
};
</script>

<style lang="scss" scoped>
.event-level-evaluation {
  padding: 15px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 20px);

  .evaluation-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 15px;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }

    // 折叠面板样式
    .level-collapse {
      .el-collapse-item {
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-bottom: 8px;

        .el-collapse-item__header {
          padding: 10px 15px;
          font-size: 14px;
        }

        .el-collapse-item__content {
          padding: 12px 15px;
        }
      }
    }

    // 选项样式
    .level-option {
      display: block;
      margin: 0;
      font-size: 14px;
    }

    // 保存按钮容器
    .save-btn-wrap {
      text-align: center;
      margin-top: 20px;
    }
  }
}
</style>
